<template>
  <div class="smart-tile-overview">
    <!-- 顶部导航 -->
    <Navigation />
    
    <div class="main-layout">
      <!-- 左侧边栏 -->
      <aside class="sidebar">
        <div class="sidebar-header">
          <h2>概览</h2>
        </div>
        
        <nav class="sidebar-nav">
          <router-link 
            to="/overview/dashboard" 
            class="sidebar-item" 
            :class="{ active: activeSection === 'dashboard' }"
          >
            <div class="sidebar-icon overview-icon"></div>
            <span>系统概况</span>
          </router-link>
          <router-link 
            to="/overview/realtime" 
            class="sidebar-item" 
            :class="{ active: activeSection === 'realtime' }"
          >
            <div class="sidebar-icon status-icon"></div>
            <span>实时状态</span>
          </router-link>
          <router-link 
            to="/overview/statistics" 
            class="sidebar-item" 
            :class="{ active: activeSection === 'statistics' }"
          >
            <div class="sidebar-icon stats-icon"></div>
            <span>异常统计</span>
          </router-link>
          <router-link 
            to="/overview/history" 
            class="sidebar-item" 
            :class="{ active: activeSection === 'history' }"
          >
            <div class="sidebar-icon history-icon"></div>
            <span>历史回溯</span>
          </router-link>
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <main class="main-content">
        <!-- 统计卡片区域 -->
        <section class="stats-section">
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-header">
                <span class="stat-label">在线瓷砖数</span>
                <div class="stat-icon online-icon">
                  <div class="trend-indicator" :class="systemStats.onlineTiles.trend.type">
                    <div class="trend-arrow" :class="systemStats.onlineTiles.trend.type === 'positive' ? 'up' : 'down'"></div>
                    <span>{{ systemStats.onlineTiles.trend.value }}</span>
                  </div>
                </div>
              </div>
              <div class="stat-value">
                <span class="value">{{ systemStats.onlineTiles.value }}</span>
                <span class="unit">{{ systemStats.onlineTiles.unit }}</span>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-header">
                <span class="stat-label">异常信号</span>
                <div class="stat-icon alert-icon">
                  <div class="trend-indicator" :class="systemStats.abnormalSignals.trend.type">
                    <div class="trend-arrow" :class="systemStats.abnormalSignals.trend.type === 'positive' ? 'up' : 'down'"></div>
                    <span>{{ systemStats.abnormalSignals.trend.value }}</span>
                  </div>
                </div>
              </div>
              <div class="stat-value">
                <span class="value">{{ systemStats.abnormalSignals.value }}</span>
                <span class="unit">{{ systemStats.abnormalSignals.unit }}</span>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-header">
                <span class="stat-label">平均压力值</span>
                <div class="stat-icon pressure-icon">
                  <div class="trend-indicator" :class="systemStats.averagePressure.trend.type">
                    <div class="trend-arrow" :class="systemStats.averagePressure.trend.type === 'positive' ? 'up' : 'down'"></div>
                    <span>{{ systemStats.averagePressure.trend.value }}</span>
                  </div>
                </div>
              </div>
              <div class="stat-value">
                <span class="value">{{ systemStats.averagePressure.value }}</span>
                <span class="unit">{{ systemStats.averagePressure.unit }}</span>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-header">
                <span class="stat-label">今日信号总量</span>
                <div class="stat-icon signal-icon">
                  <div class="trend-indicator" :class="systemStats.todaySignals.trend.type">
                    <div class="trend-arrow" :class="systemStats.todaySignals.trend.type === 'positive' ? 'up' : 'down'"></div>
                    <span>{{ systemStats.todaySignals.trend.value }}</span>
                  </div>
                </div>
              </div>
              <div class="stat-value">
                <span class="value">{{ formatNumber(systemStats.todaySignals.value) }}</span>
                <span class="unit">{{ systemStats.todaySignals.unit }}</span>
              </div>
            </div>
          </div>
        </section>

        <!-- 压力分布地图 -->
        <section class="pressure-map-section">
          <div class="section-header">
            <h3>压力分布地图</h3>
            <div class="map-controls">
              <div class="view-toggle">
                <button class="toggle-btn active">2D</button>
                <button class="toggle-btn">3D</button>
              </div>
              <div class="area-selector">
                <select v-model="currentArea" @change="changeArea(currentArea)">
                  <option value="all">全部区域</option>
                  <option value="A">区域A</option>
                  <option value="B">区域B</option>
                  <option value="C">区域C</option>
                </select>
              </div>
            </div>
          </div>
          
          <div class="pressure-map">
            <PressureHeatmap :data="heatmapData" />
          </div>
        </section>

        <!-- 图表区域 -->
        <div class="charts-section">
          <div class="charts-grid">
            <!-- 系统状态摘要 -->
            <div class="chart-card system-summary">
              <div class="chart-header">
                <h3>系统状态摘要</h3>
              </div>
              <div class="summary-content">
                <div class="health-score">
                  <div class="score-circle">
                    <div class="score-value">{{ healthScore.score }}%</div>
                    <div class="score-label">健康评分</div>
                  </div>
                </div>
                <div class="status-legend">
                  <div class="legend-item">
                    <div class="legend-dot normal"></div>
                    <span>正常</span>
                  </div>
                  <div class="legend-item">
                    <div class="legend-dot warning"></div>
                    <span>注意</span>
                  </div>
                  <div class="legend-item">
                    <div class="legend-dot error"></div>
                    <span>异常</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 实时趋势图 -->
            <div class="chart-card trend-chart">
              <div class="chart-header">
                <h3>实时趋势图</h3>
                <div class="time-tabs">
                  <button 
                    class="time-tab" 
                    :class="{ active: currentTimeRange === 'today' }"
                    @click="changeTimeRange('today')"
                  >今日</button>
                  <button 
                    class="time-tab" 
                    :class="{ active: currentTimeRange === 'yesterday' }"
                    @click="changeTimeRange('yesterday')"
                  >昨日</button>
                  <button 
                    class="time-tab" 
                    :class="{ active: currentTimeRange === 'week' }"
                    @click="changeTimeRange('week')"
                  >本周</button>
                  <button 
                    class="time-tab" 
                    :class="{ active: currentTimeRange === 'month' }"
                    @click="changeTimeRange('month')"
                  >本月</button>
                </div>
              </div>
              <div class="chart-content">
                <TrendChart :data="trendData" />
              </div>
            </div>
          </div>
        </div>

        <!-- 维护建议 -->
        <div class="maintenance-suggestion">
          <span class="suggestion-label">维护建议：</span>
          <span class="suggestion-text">{{ healthScore.recommendations[0] || '系统运行良好，暂无需要维护' }}</span>
        </div>

        <!-- 底部数据表格区域 -->
        <div class="bottom-section">
          <div class="bottom-grid">
            <!-- 最近异常列表 -->
            <div class="data-table-card">
              <div class="table-header">
                <h3>最近异常列表</h3>
                <div class="view-all">
                  <span>查看全部</span>
                  <div class="arrow-icon"></div>
                </div>
              </div>
              <ExceptionTable :data="exceptionData" />
            </div>

            <!-- 区域对比分析 -->
            <div class="chart-card comparison-chart">
              <div class="chart-header">
                <h3>区域对比分析</h3>
              </div>
              <div class="chart-content">
                <ComparisonChart :data="comparisonData" />
              </div>
            </div>
          </div>
        </div>

        <!-- 底部状态栏 -->
        <div class="status-bar">
          <div class="status-info">
            <span class="status-item">
              <span class="status-label">系统状态：</span>
              <span class="status-value" :class="systemStats.systemStatus.status">{{ systemStats.systemStatus.text }}</span>
            </span>
            <span class="status-item">
              <span class="status-label">设备在线：</span>
              <span class="status-value">{{ systemStats.systemStatus.onlineDevices }}</span>
            </span>
            <span class="status-item">
              <span class="status-label">最后更新：</span>
              <span class="status-value">{{ systemStats.systemStatus.lastUpdate }}</span>
            </span>
          </div>
          <div class="action-buttons">
            <button class="action-btn" @click="refreshAllData" :disabled="isRefreshing">
              <div class="btn-icon refresh-icon"></div>
              <span>{{ isRefreshing ? '刷新中...' : '刷新数据' }}</span>
            </button>
            <button class="action-btn" @click="exportReport" :disabled="isExporting">
              <div class="btn-icon export-icon"></div>
              <span>{{ isExporting ? '导出中...' : '导出报告' }}</span>
            </button>
            <button class="action-btn" @click="openSettings">
              <div class="btn-icon settings-icon"></div>
              <span>设置</span>
            </button>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import Navigation from '../components/Navigation.vue'
import PressureHeatmap from './components/PressureHeatmap.vue'
import TrendChart from './components/TrendChart.vue'
import ComparisonChart from './components/ComparisonChart.vue'
import ExceptionTable from './components/ExceptionTable.vue'
import smartTileApi from '../api/smartTileApi.js'

export default {
  name: 'SmartTileOverview',
  components: {
    Navigation,
    PressureHeatmap,
    TrendChart,
    ComparisonChart,
    ExceptionTable
  },
  data() {
    return {
      // 加载状态 - 已禁用
      loading: {
        stats: false,
        heatmap: false,
        trend: false,
        comparison: false,
        exceptions: false,
        health: false
      },
      
      // 错误状态
      errors: {},
      
      // 系统统计数据
      systemStats: {
        onlineTiles: { value: 0, unit: '块', trend: { type: 'positive', value: '0%' } },
        abnormalSignals: { value: 0, unit: '处', trend: { type: 'negative', value: '0%' } },
        averagePressure: { value: 0, unit: 'kPa', trend: { type: 'negative', value: '0%' } },
        todaySignals: { value: 0, unit: '个', trend: { type: 'positive', value: '0%' } },
        systemStatus: {
          status: 'normal',
          text: '运行正常',
          onlineDevices: '0/0',
          lastUpdate: ''
        }
      },
      
      // 健康评分
      healthScore: {
        score: 0,
        level: 'good',
        recommendations: []
      },
      
      // 热图数据
      heatmapData: [],
      
      // 趋势图数据
      trendData: [],
      
      // 对比图数据
      comparisonData: [],
      
      // 异常数据
      exceptionData: [],
      
      // 当前选择的时间范围
      currentTimeRange: 'today',
      
      // 当前选择的区域
      currentArea: 'all',
      
      // 操作状态
      isRefreshing: false,
      isExporting: false
    }
  },
  computed: {
    activeSection() {
      // 根据路由元信息确定当前活动的侧边栏项
      if (this.$route.meta && this.$route.meta.activeSection) {
        return this.$route.meta.activeSection
      }
      
      // 根据路径判断
      const path = this.$route.path
      if (path.includes('/dashboard')) return 'dashboard'
      if (path.includes('/realtime')) return 'realtime'
      if (path.includes('/statistics')) return 'statistics'
      if (path.includes('/history')) return 'history'
      
      // 默认为系统概况
      return 'dashboard'
    }
  },
  async mounted() {
    // 组件挂载时加载所有数据
    await this.loadAllData()
    
    // 设置定时刷新（每30秒）- 减少频繁编译
    this.refreshTimer = setInterval(() => {
      this.loadAllData() // 静默刷新
    }, 30000)
  },
  
  beforeUnmount() {
    // 清理定时器
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer)
    }
  },
  
  methods: {
    /**
     * 加载所有数据
     */
    async loadAllData() {
      try {
        // 并行加载所有数据
        await Promise.all([
          this.loadSystemStats(),
          this.loadHealthScore(),
          this.loadHeatmapData(),
          this.loadTrendData(),
          this.loadComparisonData(),
          this.loadExceptionData()
        ])
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message?.error('数据加载失败，请稍后重试')
      }
    },

    /**
     * 加载系统统计数据
     */
    async loadSystemStats() {
      // 加载状态已禁用
      this.errors.stats = null
      
      try {
        const response = await smartTileApi.getSystemStats()
        if (response.success) {
          this.systemStats = response.data
        }
      } catch (error) {
        console.error('加载系统统计数据失败:', error)
        this.errors.stats = error.message
      } finally {
        // 加载状态已禁用
      }
    },

    /**
     * 加载健康评分
     */
    async loadHealthScore() {
      // 加载状态已禁用
      this.errors.health = null
      
      try {
        const response = await smartTileApi.getHealthScore()
        if (response.success) {
          this.healthScore = response.data
        }
      } catch (error) {
        console.error('加载健康评分失败:', error)
        this.errors.health = error.message
      } finally {
        // 加载状态已禁用
      }
    },

    /**
     * 加载热图数据
     */
    async loadHeatmapData() {
      // 加载状态已禁用
      this.errors.heatmap = null
      
      try {
        const response = await smartTileApi.getHeatmapData({
          area: this.currentArea
        })
        if (response.success) {
          this.heatmapData = response.data.heatmap
        }
      } catch (error) {
        console.error('加载热图数据失败:', error)
        this.errors.heatmap = error.message
      } finally {
        // 加载状态已禁用
      }
    },

    /**
     * 加载趋势数据
     */
    async loadTrendData() {
      // 加载状态已禁用
      this.errors.trend = null
      
      try {
        const response = await smartTileApi.getTrendData({
          timeRange: this.currentTimeRange
        })
        if (response.success) {
          this.trendData = response.data.trend
        }
      } catch (error) {
        console.error('加载趋势数据失败:', error)
        this.errors.trend = error.message
      } finally {
        // 加载状态已禁用
      }
    },

    /**
     * 加载对比数据
     */
    async loadComparisonData() {
      // 加载状态已禁用
      this.errors.comparison = null
      
      try {
        const response = await smartTileApi.getComparisonData()
        if (response.success) {
          this.comparisonData = response.data.areas
        }
      } catch (error) {
        console.error('加载对比数据失败:', error)
        this.errors.comparison = error.message
      } finally {
        // 加载状态已禁用
      }
    },

    /**
     * 加载异常数据
     */
    async loadExceptionData() {
      // 加载状态已禁用
      this.errors.exceptions = null
      
      try {
        const response = await smartTileApi.getExceptionData({
          page: 1,
          pageSize: 10
        })
        if (response.success) {
          this.exceptionData = response.data.list
        }
      } catch (error) {
        console.error('加载异常数据失败:', error)
        this.errors.exceptions = error.message
      } finally {
        // 加载状态已禁用
      }
    },

    /**
     * 切换时间范围
     */
    async changeTimeRange(timeRange) {
      if (this.currentTimeRange === timeRange) return
      
      this.currentTimeRange = timeRange
      await this.loadTrendData()
    },

    /**
     * 切换区域
     */
    async changeArea(area) {
      if (this.currentArea === area) return
      
      this.currentArea = area
      await this.loadHeatmapData()
    },

    /**
     * 刷新所有数据
     */
    async refreshAllData() {
      this.isRefreshing = true
      
      try {
        await smartTileApi.refreshAllData()
        await this.loadAllData()
        this.$message?.success('数据刷新成功')
      } catch (error) {
        console.error('刷新数据失败:', error)
        this.$message?.error('数据刷新失败，请稍后重试')
      } finally {
        this.isRefreshing = false
      }
    },

    /**
     * 导出报告
     */
    async exportReport() {
      this.isExporting = true
      
      try {
        const response = await smartTileApi.exportReport({
          format: 'pdf',
          timeRange: this.currentTimeRange
        })
        
        // 创建下载链接
        const url = window.URL.createObjectURL(new Blob([response]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `智能瓷砖监控报告_${new Date().toLocaleDateString()}.pdf`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
        
        this.$message?.success('报告导出成功')
      } catch (error) {
        console.error('导出报告失败:', error)
        this.$message?.error('报告导出失败，请稍后重试')
      } finally {
        this.isExporting = false
      }
    },

    /**
     * 打开设置
     */
    openSettings() {
      // 这里可以打开设置弹窗或跳转到设置页面
      this.$message?.info('设置功能开发中...')
    },

    /**
     * 格式化数字显示
     */
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toLocaleString()
    }
  }
}
</script>

<style scoped>
.smart-tile-overview {
  min-height: 100vh;
  background: #F5F5F5;
  font-family: 'Inter', sans-serif;
}

/* 主布局 */
.main-layout {
  display: flex;
  min-height: calc(100vh - 64px);
}

/* 左侧边栏 */
.sidebar {
  width: 220px;
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #E5E7EB;
}

.sidebar-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  margin: 0;
}

.sidebar-nav {
  padding: 8px 4px;
  flex: 1;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9.5px 24px;
  margin: 0 4px;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.sidebar-item.active,
.sidebar-item.router-link-active {
  background: #E6F4FF;
  color: #1677FF;
}

.sidebar-item:hover:not(.active):not(.router-link-active) {
  background: #F5F5F5;
}

.sidebar-icon {
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
}

.overview-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eab9c33-2b2252f3-3a0a-451f-bd4f-0a6d0fa648a0.svg');
}

.status-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eab7646-7e8f5892-bd0e-4f3d-aee6-91f21a5f1662.svg');
}

.stats-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eabd7a3-f8e7980c-bf1a-4074-954b-d6c8d91a7fe9.svg');
}

.history-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eaba551-0ffd80c8-6fa1-4ca7-a6d5-71b95cbbe63c.svg');
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-card {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 8px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  color: #6B7280;
  font-size: 14px;
  line-height: 21px;
}

.stat-icon {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}

.online-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eabd89d-21a17565-8645-4270-90b6-2a2272c73078.svg');
}

.alert-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eabc934-d33f6193-b2d6-46e4-8298-190561d3feeb.svg');
}

.pressure-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eab125b-6c5000e4-5911-4f9f-84b4-faff46e8f8e3.svg');
}

.signal-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eac24c4-3f07d587-aa70-4632-a249-16d9bdf83c7e.svg');
}

.trend-indicator {
  position: absolute;
  top: -12px;
  right: -5px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  line-height: 16px;
}

.trend-indicator.positive {
  color: #52C41A;
}

.trend-indicator.negative {
  color: #FF4D4F;
}

.trend-arrow {
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
}

.trend-arrow.up {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eab3e38-602efc19-d42e-42c6-8561-17c9c6ee0b57.svg');
}

.trend-arrow.down {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eab52c5-dffa226f-9b70-417f-aa48-47b4a5c737b1.svg');
}

.stat-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.value {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: rgba(0, 0, 0, 0.88);
}

.unit {
  color: #6B7280;
  font-size: 14px;
  line-height: 21px;
}

/* 压力分布地图 */
.pressure-map-section {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 8px;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px 13px;
  border-bottom: 1px solid #F0F0F0;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  margin: 0;
}

.map-controls {
  display: flex;
  gap: 16px;
  align-items: center;
}

.view-toggle {
  display: flex;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  overflow: hidden;
}

.toggle-btn {
  background: #FFFFFF;
  border: none;
  padding: 5px 16px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn.active {
  background: #1677FF;
  color: #FFFFFF;
}

.area-selector select {
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.pressure-map {
  padding: 28px 29px;
}

/* 图表区域 */
.charts-grid {
  display: grid;
  grid-template-columns: 382px 1fr;
  gap: 24px;
}

.chart-card {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 8px;
  overflow: hidden;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px 13px;
  border-bottom: 1px solid #F0F0F0;
}

.chart-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  margin: 0;
}

.time-tabs {
  display: flex;
  gap: 32px;
}

.time-tab {
  background: none;
  border: none;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
  padding: 0 0 5px;
  position: relative;
}

.time-tab.active {
  color: #1677FF;
  text-shadow: 0px 0px 0.25px #1677FF;
}

.time-tab.active::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 0;
  right: 0;
  height: 2px;
  background: #1677FF;
}

/* 系统状态摘要 */
.system-summary .summary-content {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.health-score {
  position: relative;
  width: 200px;
  height: 200px;
}

.score-circle {
  width: 100%;
  height: 100%;
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eacec32-cc08f3ed-f061-4ef6-b456-385a0af39bdb.svg');
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: rgba(0, 0, 0, 0.88);
}

.score-label {
  font-size: 14px;
  line-height: 20px;
  color: #6B7280;
  margin-top: 4px;
}

.status-legend {
  display: flex;
  gap: 4px;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 22px;
}

.legend-dot {
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
}

.legend-dot.normal {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eaca2fe-4c05ff1f-f504-4a23-9cf0-f75fbb9ed0fb.svg');
}

.legend-dot.warning {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eac5a73-6c44c9f6-da10-4f4d-b07a-a64888e7afc8.svg');
}

.legend-dot.error {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eacf6a1-a61f20d1-f2c8-49b2-8fa1-cb5ba6a02d6a.svg');
}

.legend-item:first-child {
  color: #52C41A;
}

.legend-item:nth-child(2) {
  color: #FAAD14;
}

.legend-item:last-child {
  color: #FF4D4F;
}

/* 趋势图 */
.trend-chart .chart-content {
  height: 217px;
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eac4966-4b183d0c-1822-48a0-a4ee-0c3e02023201.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 维护建议 */
.maintenance-suggestion {
  text-align: center;
  font-size: 14px;
  line-height: 21px;
  margin: 26px 0 18px;
}

.suggestion-label {
  color: rgba(0, 0, 0, 0.45);
}

.suggestion-text {
  color: rgba(0, 0, 0, 0.88);
}

/* 底部区域 */
.bottom-grid {
  display: grid;
  grid-template-columns: 574px 1fr;
  gap: 24px;
}

.data-table-card {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px 13px;
  border-bottom: 1px solid #F0F0F0;
}

.table-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  margin: 0;
}

.view-all {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1677FF;
  font-size: 14px;
  cursor: pointer;
}

.arrow-icon {
  width: 14px;
  height: 14px;
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eac90f1-a14459c6-6c9c-4b95-b054-195d0703f379.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

/* 对比图 */
.comparison-chart .chart-content {
  height: 280px;
  padding: 20px;
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eac8442-63cf81da-c132-4413-aa4d-3fbaa113392f.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 状态栏 */
.status-bar {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 8px;
  padding: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.status-info {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.status-item {
  display: flex;
  gap: 4px;
  font-size: 14px;
  line-height: 21px;
}

.status-label {
  color: rgba(0, 0, 0, 0.45);
}

.status-value {
  color: rgba(0, 0, 0, 0.88);
}

.status-value.normal {
  color: #52C41A;
}

.action-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.action-btn {
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
  padding: 6px 16px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  border-color: #1677FF;
  color: #1677FF;
}

.btn-icon {
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
}

.refresh-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2eadb34d-9a33964f-cf08-4980-91e6-69bafaa6d3b5.svg');
}

.export-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2ead1b5f-850328f4-8f91-4038-b8dc-15d18050d0db.svg');
}

.settings-icon {
  background-image: url('https://miaoduo.fbcontent.cn/private/resource/image/199191e2ead7cf0-1a4e633b-6347-4057-9bbc-85db7e281d28.svg');
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .main-content {
    padding: 16px;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .main-layout {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    order: 2;
  }
  
  .main-content {
    order: 1;
  }
  
  .status-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .status-info {
    justify-content: center;
  }
  
  .action-buttons {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .main-content {
    padding: 12px;
    gap: 16px;
  }
  
  .map-controls {
    flex-direction: column;
    gap: 8px;
  }
  
  .status-info {
    flex-direction: column;
    gap: 8px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}

/* 加载状态样式 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #1677FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 禁用状态样式 */
.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: #d9d9d9;
  color: rgba(0, 0, 0, 0.25);
}

.action-btn:disabled:hover {
  border-color: #d9d9d9;
  color: rgba(0, 0, 0, 0.25);
}

/* 错误状态样式 */
.error-message {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 4px;
  text-align: center;
}

/* v-loading 指令样式 */
[v-loading] {
  position: relative;
}
</style>
